<template>
  <div>
    <t-base-table :fixedRows="[0, 0]" maxHeight="750px" row-key="index" :data="props.datas" :columns="props.columns">
      <template #data="{ row }">
        <img :src="urls + row.data" alt="" class="img-box" />
      </template>

      <template #name="{ row }">
        <div class="names-box">
          {{ row.name }}
        </div>
      </template>
      <template #status>
        <span class="status-type"
          ><t-icon name="check-circle-filled" size="14" color="rgba(0, 168, 112, 1)"></t-icon> 上传成功</span
        >
      </template>

      <template #size="{ row }">
        <span> {{ formatFileSize(row.size / 1000) }}</span>
      </template>

      <template #operation="{ row, rowIndex }">
        <div class="operation-box hw-flex-style-c-c">
          <span class="hw-click-cursor" @click="remove(rowIndex, row.url)">删除</span>
        </div>
      </template>
    </t-base-table>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { formatFileSize } from '@/utils/minxin';
const props = defineProps({
  datas: {
    type: Array,
  },
  columns: {
    type: Array,
  },
});
const emit = defineEmits(['removeIndex']);
const remove = (e, url?: number) => {
  emit('removeIndex', e, url);
};
</script>

<style lang="less" scoped>
.operation-box {
  span {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #e62b17;
    // margin-right: 8px;
  }
}
.status-type {
  color: rgba(0, 0, 0, 0.9);
  margin-left: 9px;
}
:deep(.t-table__header) {
  height: 48px;
}
:deep(.t-table__body tr) {
  height: 60px;
}
:deep(.t-table__content) {
  // max-height: 10000px;
}
.names-box {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
